<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>新增质检方案</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="方案名称" prop="schemeName">
          <el-input v-model="form.schemeName" placeholder="请输入方案名称" />
        </el-form-item>

        <el-form-item label="方案类型" prop="schemeType">
          <el-select v-model="form.schemeType" placeholder="请选择方案类型">
            <el-option
              v-for="item in schemeTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="检测项" prop="items">
          <el-transfer
            v-model="form.items"
            :data="itemOptions"
            :titles="['可选检测项', '已选检测项']"
            :props="{
              key: 'id',
              label: 'name'
            }"
          ></el-transfer>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AddQualityScheme',
  data() {
    return {
      // 表单参数
      form: {
        schemeName: '',
        schemeType: '',
        items: [],
        remark: ''
      },
      // 方案类型选项
      schemeTypeOptions: [
        { value: '1', label: '来料检验' },
        { value: '2', label: '过程检验' },
        { value: '3', label: '出货检验' }
      ],
      // 检测项选项
      itemOptions: [
        { id: '1', name: '尺寸测量' },
        { id: '2', name: '表面检查' },
        { id: '3', name: '功能测试' },
        { id: '4', name: '性能测试' },
        { id: '5', name: '材质检验' },
        { id: '6', name: '外观检查' },
        { id: '7', name: '重量测量' },
        { id: '8', name: '电气性能' }
      ],
      // 表单校验
      rules: {
        schemeName: [
          { required: true, message: '方案名称不能为空', trigger: 'blur' }
        ],
        schemeType: [
          { required: true, message: '请选择方案类型', trigger: 'change' }
        ],
        items: [
          { type: 'array', required: true, message: '请至少选择一个检测项', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 实际应调用后端API
          this.$modal.msgSuccess("新增成功");
          this.cancel();
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.push({ path: "/sb/QualityScheme" });
    }
  }
}
</script> 